<template>
  <div class="todo-container">
    <div class="todo-wrap">
        <Header :addTodo="addTodo"/>
        <List :todos="todos" :deleteTodo="deleteTodo" :updateTodo="updateTodo"/>
        <Footer :deleteAll="deleteAll" :todos="todos" :checkedall="checkedall"/>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, provide, ref, onMounted, watch} from 'vue';
import Header from './components/header.vue'
import List from './components/list.vue'
import Footer from './components/footer.vue'
import { Todo } from './types/todo';
import { saveTodos, getTodos } from './utils/localStorage';
export default defineComponent({
  name: 'App',
  components: {
    Header,
    List,
    Footer,
  },
  setup() {
    // const state = reactive<{todos: Todo[]}>({
    //   todos: [{id: 1, name: '羽毛球', checked: false},
    //               {id: 2, name: '打篮球', checked: false},
    //               {id: 3, name: '踢足球', checked: true},
    //               {id: 4, name: '打豆豆', checked: false}],
    // })
    let state = reactive<{todos: Todo[]}>({
      todos: [],
    })
    // 生命中周期中读取数据
    onMounted(() => {
      setTimeout(function() {
        state.todos = getTodos();
      }, 1000);
    });

    // 监听数据变化，同时保存到本地
    watch(
      () => state.todos,
      (val) => {
      saveTodos(val);
    },
    {deep: true});
    // watch(() => state.todos, saveTodos, {deep: true});


    // 增加项目
    let addTodo = function(str:string) {
      if (!str.trim()) return;
      let item:Todo = {
        id: Number(new Date()),
        name: str,
        checked: false,
      };
      state.todos.unshift(item);
    }
    // 删除项目
    let deleteTodo = function(id:any) {
      if (window.confirm('确定删除吗？')) {
        state.todos.forEach((item, index) => {
          item.id === id && state.todos.splice(index, 1);
        })
      }
    }
    // 修改选中状态
    let updateTodo = function(id:number) {
      state.todos.forEach((item, index)=> {
        if (id === item.id) {
          item.checked = !item.checked;
        }
      });
    }
    // 删除选中
    let deleteAll = function() {
      let newTodo = state.todos.filter(item => !item.checked);
      state.todos = newTodo;
    }
    // 全选或者全不选
    let checkedall = function(val:boolean) {
      state.todos.forEach(item => {
        item.checked = val;
      });
      // console.log('修改quan选状态:', val);
    }
    // 祖孙数据通信
    // provide('deleteTodo', deleteTodo);
    return {
      ...toRefs(state),
      addTodo,
      deleteTodo,
      deleteAll,
      updateTodo,
      checkedall,
    }
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
* {
  list-style: none;
  padding: 0;
  margin: 0;
}

.todo-container {
  width: 600px;
  height: 500px;
  margin: 0 auto;
  border: 1px solid rgb(121, 121, 121);
  margin-top: 50px;
}

.todo-wrap {
  width: 70%;
  height: 70%;
  border-radius: 10px;
  margin: auto;
  border: 1px solid #9999;
  margin-top: 15%;
}
</style>
